<template>
  <div class="markdown">
    <el-tabs
      tab-position="right"
      class="mdTabs"
      v-model="Blog.article.articleTab"
      closable
      @tab-remove="Blog.articleTabRemove"
    >
      <div
        class="empty"
        v-show="Blog.article.articlesTabs.length == 0"
        v-router="{ path: '/blog/article' }"
      >
        <span>请文章页操作再编辑</span>
      </div>
      <el-tab-pane :name="item.id" v-for="item in Blog.getArticlesContent"
        ><template #label>
          <el-tooltip effect="dark" :content="item.title" placement="left">
            <span>{{
              item.title.length > 10
                ? item.title.slice(0, 5) + "..."
                : item.title
            }}</span>
          </el-tooltip></template
        >
        <mdeditor :id="item.id"></mdeditor>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts">
export default {
  // name:"markdown"
};
</script>

<script lang="ts" setup>
import { useBlog } from "../../../store/blog";
import { useDheader } from "../../../store/Dheader";
const mdeditor = defineAsyncComponent(() => import("./mdeditor.vue"));
const Blog = useBlog();
const Dheader = useDheader();
Dheader.$subscribe(
  (mutation, state) => {
    if (
      mutation.type == "direct" &&
      state.header.row2.tabs.findIndex((v: any) => v.to == "/blog/markdown") <
        0 &&
      Blog.article.articlesTabs.length != 0
    ) {
      //清空表单存储内容和编辑器标签栏
      Blog.article.articlesTabs.forEach((v, i) => {
        Blog.article.articles[Blog.getIndex(v)].contentForm = "";
      });
      Blog.article.articlesTabs.length = 0;
    }
  },
  { detached: true }
);
</script>

<style lang="scss" scoped>
.markdown {
  position: relative;
  left: -20px;
  top: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 20px);
  display: flex;
  .mdTabs {
    width: 100%;
    height: 100%;
    border: 0px;
    background-color: rgb(255, 255, 255);
    :deep(.el-tabs__content) {
      padding: 0px;
      height: 100%;
    }

    :deep(.el-tabs__header) {
      width: 150px;
    }
  }
}
.empty {
  width: 100%;
  height: 100%;
  cursor: pointer;

  span {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 20px;
    color: var(--theme-color);
  }
}
</style>
